<%-- 
    Document   : CartillaProfesionales
    Created on : 01-nov-2013, 12:04:00
    Author     : Milene
--%>


<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script src="http://code.jquery.com/jquery-latest.js"></script>
        <title>Plataforma Unificadora de Obras Sociales</title>
        <link href="css/style.css" rel="stylesheet" type="text/css" />
        <link href="css/stylebarra.css" rel="stylesheet" type="text/css"/>
        <link href="css/styletabla.css" rel="stylesheet" type="text/css"/>
        <script language="javascript" type="text/javascript">
         
         $(document).ready(function(){           
            /** Mostramos el valor-texto seleccionado */
            $("#filtro").change(function(){   
                var texto=$("#filtro option:selected").text();      
              
                if(texto==""){               
                $("#elementosE").css("display", "none");
                $("#elementosP").css("display", "none");
                tableSearch.mostrar();
                }
                
                if(texto=="Especialidad"){   
                     $("#elementosP").css("display", "none");
                     $("#elementosE").css("display", "block");                                       
                     }                    
                
                if(texto=="Prestadora"){          
                    $("#elementosE").css("display", "none");        
                    $("#elementosP").css("display", "block");                  
                }
            });
        })
        
   
        //define the table search as an object, which can implement both functions and properties
        window.tableSearch = {};

        //initialize the search, setup the current object
        tableSearch.init = function() {
           // alert("Search.init");
            //define the properties I want on the tableSearch object
            this.Rows = document.getElementById('data').getElementsByTagName('TR');
            this.RowsLength = tableSearch.Rows.length;
            this.RowsText = [];
            
            //loop through the table and add the data to
            for (var i = 0; i < tableSearch.RowsLength; i++) {
                this.RowsText[i] = (tableSearch.Rows[i].innerText) ? tableSearch.Rows[i].innerText.toUpperCase() : tableSearch.Rows[i].textContent.toUpperCase();
            }
        }

        //onlys shows the relevant rows as determined by the search string
        tableSearch.runSearch = function() {
            
            //get the search term
            if(document.getElementById('filtro').value=="Especialidad")
               this.Term = document.getElementById('sel1').value.toUpperCase();
             if(document.getElementById('filtro').value=="Prestadora")
                this.Term = document.getElementById('sel2').value.toUpperCase();
            
            
            // alert("tabla " +this.Term);
            //loop through the rows and hide rows that do not match the search query
            for (var i = 0, row; row = this.Rows[i], rowText = this.RowsText[i]; i++) {               
                row.style.display = ((rowText.indexOf(this.Term) != -1) || this.Term === '') ? '' : 'none';
            }
        }
        
        tableSearch.mostrar = function() {  
           
            for (var i = 0, row; row = this.Rows[i], rowText = this.RowsText[i]; i++) {                
                row.style.display = 'table-row';               
            }
        }

        //runs the search
        tableSearch.search = function(e) {
            //checks if the user pressed the enter key, and if they did then run the search
            var keycode;
            if (window.event) { keycode = window.event.keyCode; }
            else if (e) { keycode = e.which; }
            else { return false; }
            if (keycode == 13) {
                tableSearch.runSearch();
            }
            else { return false; }
        }       
        </script>
       
        
    </head>
    
    <body onload="tableSearch.init();">    
        
        <div class="container">         
            <div class="content">    
                <div class="sidebar1">
                    <div id='cssmenu'>
                    <ul>
                        <li><a href='index.jsp?action=MostrarDatosAfiliado' target="_self"><span>Mis Datos</span></a></li>
                        <li class='active has-sub'><a href='#'><span>Mis Turnos</span></a>
                            <ul>
                                <li class='has-sub'><a href='turnosolicitado.jsp'><span>Turnos Solicitados</span></a> </li>
                                <li class='has-sub'><a href='index.jsp?action=MostrarTurnosDisponible' target="_self"><span>Buscar Turnos</span></a> </li>      
                                <li class='has-sub'><a href='index.jsp?action=CartillaProfesionales' target="_self"><span>Cartilla de Profesionales</span></a>  </li>
                            </ul>
                        </li>  
                        <li><a href='inquietud.jsp'><span>Mis Inquietudes</span></a></li>
                        <li><a href='novedades.jsp'><span>Novedades</span></a></li>
                        <li class='last'><a href='index.jsp'><span>Cerrar Sesion</span></a></li>
                    </ul>
                    </div>
                </div>        
        
                <p style="color: #FF0000;"> ${requestScope.Error}</p>                 
            
                <br>
                
                <td height="42" align="left" >Filtrar por</td>
                <td><select name="filtro" id="filtro"  style="width: 120px" >
                         <option></option>
                         <option>Especialidad</option>
                         <option>Prestadora</option> 
                </select></td>
               
                <div id="elementosE" style="display: none;">             
                    <td><select name="sel1" id="sel1"   >           
                    <c:forEach items="${requestScope.especialidades}" var="lista">  
                        <option value="${lista}">${lista}             
                    </c:forEach>       
                    </select></td>                            
                    <input type="button" value="Filtrar" onclick="tableSearch.runSearch();"/>                      
                </div>
                
                <div id="elementosP" style="display: none;">             
                    <td><select name="sel2" id="sel2"   >           
                    <c:forEach items="${requestScope.prestadoras}" var="lista">  
                        <option value="${lista}">${lista}             
                    </c:forEach>       
                    </select></td>                            
                    <input type="button" value="Filtrar" onclick="tableSearch.runSearch();"/>
                </div>
               
          
                
       <div class="table-header">
        <table id="headertable" width="671" height="196"   border="1">
            <thead> <tr>
                    <th class="header-cell col1">Profesional</th>
                    <th class="header-cell col2">Especialidad</th>
                    <th class="header-cell col3">Prestadora</th>                  
            </tr> </thead>
        </table>
        </div>
  
        <table width="671" height="196" border="1">  
             <tbody name="data" id="data">
                <c:forEach items="${requestScope.cartilla}" var="lista">
                    <tr>
                    <td> ${lista.nombreProfesional} ${lista.apellidoProfesional} </td>
                    <td> ${lista.nombreEspecialidad} </td>
                    <td> ${lista.nombrePrestadora} </td>
                    </tr>
                </c:forEach>   
             </tbody>
        </table>             
            
        </div>  <!-- end .content -->
      </div>   <!-- end .container -->    
        
    </body>
</html>